<template>
    <div class="qilin-QilinUploadImage">
        <el-upload
            ref="QilinUploadImage"
            :action="ownUoloadImageConfig.action || '#' "
            :list-type="ownUoloadImageConfig.listType || 'picture-card' "
            :auto-upload="ownUoloadImageConfig.autoUpload || false "
            :limit="ownUoloadImageConfig.limit || 1 "
            :file-list="ownUoloadImageConfig.fileList || value?value:[] "
            :multiple="ownUoloadImageConfig.multiple || false "
            :show-file-list="ownUoloadImageConfig.showFileList || false "
            :on-change="changeImage"
            :on-remove="removeImage"
            :on-exceed="exceedImage"
            :on-preview="previewImage"
        >
            <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogImage.isShow" title="图片预览" :append-to-body="true" center>
            <img width="100%" :src="dialogImage.imgSrc" alt="">
            <!-- <el-image :src="dialogImage.imgSrc" :preview-src-list="[dialogImage.imgSrc]"></el-image> -->
        </el-dialog>
    </div>
</template>
<script>
import QilinDialog from "./QilinDialog.vue";
export default {
    name:"QilinUploadImage",
    props:["value","uploadImageConfig"],
    components:{
        QilinDialog
    },
    data(){
        return {
            // 组件自身的默认配置
            ownUoloadImageConfig:{},
            // 文件上传列表
            fileList:[],
            dialogImage:{ // 选中上传图片后的图片查看弹窗
                isShow:false,
                imgSrc:""
            }
        }
    },
    watch:{
        uploadImageConfig:{
            handler(newValue,oldValue){
                this.initOwnUploadImageConfig(newValue);
            },
            immediate:true,
            dedpp:true
        }
    },
    methods:{
        // 将传来的配置赋值给组件自身
        initOwnUploadImageConfig(target){
            this.ownUoloadImageConfig=target;
        },
        // 选中图片事件监听
        changeImage(file,fileList){
            // console.log(file,fileList);
            const imageType=file.name.split(".").pop();
            if(!["jpg","jpeg","png","gif"].includes(imageType)){
                this.$message({
                    message:"请上传图片格式的文件",
                    type:"warning"
                });
                this.$refs["QilinUploadImage"].uploadFiles.splice(0,1);
            }else if(file.size > 200*1000){
                this.$message({
                    message:"图片大小不可超过200k",
                    type:"warning"
                });
                // console.log(this.$refs["QilinUploadImage"]);
                this.$refs["QilinUploadImage"].uploadFiles.splice(0,1);
            }else{
                this.fileList.push({
                    url:file.url,
                    raw:file.raw
                });
                this.$emit("success",this.fileList);
            };
        },
        // 点击移除图片事件监听
        removeImage(file,fileList){
            // console.log(file,fileList);
            this.$emit("success",[]);
        },
        // 当选择图片超出上传数量时事件监听
        exceedImage(files,fileList){
            // console.log(files,fileList);
            if(!this.ownUoloadImageConfig.limit || this.ownUoloadImageConfig.limit === 1){
                if(files.length > 0){
                    this.$message({
                        message:"注意只能上传一张图片",
                        type:"warning"
                    });
                };
            };
        },
        // 当点击选中图片预览时事件监听
        previewImage(file){
            // console.log(file);
            this.dialogImage.isShow=true;
            this.dialogImage.imgSrc=file.url;
        }
    }
}
</script>
<style lang="less" scoped>
.qilin-QilinUploadImage{

}
</style>